<template>

  <view class="container">

    <uni-section title="启终点" type="line">
      <view class="example">
        <uni-forms>
          <uni-forms-item label="任务起点">
            <uni-easyinput type="textarea" v-model="inputStart" placeholder="请输入启点 如:TK-4101罐" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="example">
        <uni-forms>
          <uni-forms-item label="任务终点">
            <uni-easyinput type="textarea" v-model="inputEnd" placeholder="请输入终点 如:6201灌装机" />
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-section>

    <uni-section title="选择所涉及的任务阀门" type="line">
      <view class="example-body">
        <view class="result-box">
          <text>所选阀门1为：</text>
        </view>
        <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city" class="combox"></uni-combox>
      </view>

      <view class="example-body">
        <view class="result-box">
          <text>所选阀门2为：</text>
        </view>
        <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city1"></uni-combox>
      </view>


      <view class="example-body">
        <view class="result-box">
          <text>所选阀门3为：</text>
        </view>
        <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city3"></uni-combox>
      </view>

      <view class="example-body">
        <view class="result-box">
          <text>所选阀门4为：</text>
        </view>
        <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city4"></uni-combox>
      </view>

      <view class="example-body">
        <view class="result-box">
          <text>所选阀门5为：</text>
        </view>
        <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city5"></uni-combox>
      </view>


      <view class="example-body">
        <view class="result-box">
          <text>所选阀门6为：</text>
        </view>
        <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city6"></uni-combox>
      </view>

      <view class="example-body">
        <view class="result-box">
          <text>所选阀门7为：</text>
        </view>
        <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city7"></uni-combox>
      </view>
    </uni-section>
    <!-- 提交按钮 -->
    <view>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="button-sp-area">
          <button class="mini-btn" type="primary" style="width: 40%;margin-top: 30rpx;"
            @click="submitData">创建任务</button>
        </view>
      </view>
    </view>

  </view>
  <!-- 占位视图 -->
  <view class="placeholder"></view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useValvePageStore } from '@/stores/modules/valvepage';
import type ValvePageData from '@/types/valvepage';
import { useValvesStore } from '@/stores/modules/getValvesData';
const valvesStore = useValvesStore();

// 定义候选列表和城市选择变量()
//to do 替换为后端数据
// const candidates = ref([
//   'P-4101至TK-4101', 'P-4101至TK-4102', 'P-4101至TK-4103', 'TK-4101至P-4101', 'TK-4102至P-4101', 'TK-4103至P-4101',
//   'P-4201至TK-4201', 'P-4201至TK-4202', 'P-4201至TK-4203', 'TK-4201至P-4201', 'TK-4202至P-4201', 'TK-4203至P-4201'
// ]);
const candidates = ref<string[]>([]);
candidates.value = valvesStore.valvesList;

// 注意：在你的原始代码中，有多个相同的 candidates 列表。这里我们假设你想要每个都有独立的引用。
const city = ref('');
const city1 = ref('');
const city3 = ref('');
const city4 = ref('');
const city5 = ref('');
const city6 = ref('');
const city7 = ref('');

// 输入起始和结束位置
const inputStart = ref('');
const inputEnd = ref('');

//初始化
const data = ref<ValvePageData>({
  start: '',
  taskValve1: '',
  taskValve2: '',
  taskValve3: '',
  taskValve4: '',
  taskValve5: '',
  taskValve6: '',
  taskValve7: '',
  end: '',
  createUser: '',
  createTime: '',
  updateTime: ''
});


const valvePageStore = useValvePageStore();

//to do 把收集的提交数据到后端
const submitData = async () => {
  // 定义需要验证的 city 字段
  const citiesToValidate = [city, city1, city3, city4, city5, city6, city7];

  // 遍历每个 city 字段，检查其值是否在 candidates 中
  for (const c of citiesToValidate) {
    if (c.value && !candidates.value.includes(c.value)) {
      uni.showToast({
        title: '所选任务阀门包含无效选项，请重新选择',
        icon: 'none',
        duration: 2000
      });
      return; // 如果有任何一个城市不是有效的候选选项，则停止提交
    }
  }


  data.value = {
    start: inputStart.value,
    taskValve1: city.value,
    taskValve2: city1.value,
    taskValve3: city3.value,
    taskValve4: city4.value,
    taskValve5: city5.value,
    taskValve6: city6.value,
    taskValve7: city7.value,
    end: inputEnd.value,
    createUser: uni.getStorageSync('rememberedUsername') || '',
    // createTime: new Date().toISOString(),
    createTime: '',
    // updateTime: new Date().toISOString()
    updateTime: ''
  };

  if ((data.value.start == '') || (data.value.end == '')) {
    uni.showToast({
      title: '起点和终点不能为空',
      icon: 'none',
      duration: 2000
    })
    return;
  }

  await valvePageStore.submitToMysql(data.value);

  //跳转回首页
  uni.switchTab({
    url: '/pages/index/index' // 确保此路径是 tabBar 中定义的一个页面
  });

}
</script>

<style lang="scss">
.example-body {
  padding: 12px;
  background-color: #FFFFFF;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.placeholder {
  width: 100%;
  height: 70vh;
  /* 根据需要调整高度 */
}
</style>
